<template>
	<view class="ac-tabbar-item" :style="[{ width: _width + 'rpx' }, props._style]" @click="_onClick">
		<!-- {{tmTabbarWidth}} -->
		<slot name="default">
			<view :class="[_active ? 'anifun' : '']">
				<!-- <image
					v-if="props.selectedIcon"
					:src="_icon"
					:style="{
						width: 60 + 'rpx',
						height: 60 + 'rpx',
					}"
					mode=""
				></image> -->
				<ac-icon v-if="_icon" :name="_icon"></ac-icon>
			</view>
			<ac-text
				v-if="props.label"
				:color="_active ? selectedColor : 'gray-500'"
				font-size="22"
				:label="props.label"
				_class=""
			/>
		</slot>
	</view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, computed, ref, inject, onUnmounted, nextTick, watch, PropType } from 'vue';
import { pub_props, computedColor, computedGray } from '@/uni_modules/ac-ui/utils/minxs/props';

const proxy = getCurrentInstance()?.proxy ?? null;

const props = defineProps({
	icon: {
		type: String,
		default: '',
	},
	selectedIcon: {
		type: String,
		default: '',
	},
	selectedColor: {
		type: String,
		default: '',
	},
	active: {
		type: Boolean,
		default: false,
	},
	animation: {
		type: String,
		default: '',
	},
	btnTop: {
		type: Boolean,
		default: false,
	},
	iconSize: {
		type: Number,
		default: 20,
	},
	selectedIconSize: {
		type: Number,
		default: 20,
	},
	label: {
		type: String,
		default: '',
	},
	textSize: {
		type: Number,
		default: 20,
	},
	_class: {
		type: String,
	},
	_style: {
		type: [Array, String, Object],
		default: () => [],
	},
});

const emits = defineEmits(['click']);

// const _style = computed(() => {
// 	let style = {};
// 	// if (props.selectedColor) {
// 	// 	style['font-color'] = computedColor(props.selectedColor);
// 	// }
// 	return style;
// })

const _icon = computed(() => (props.active ? props.selectedIcon : props.icon));
const _iconSize = computed(() => (props.active ? props.selectedIconSize : props.iconSize));
const _active = ref(props.active);
const tmTabbarWidth = inject(
	'tmTabbarWidth',
	computed(() => 50)
);
const _width = computed(() => {
	if (props.btnTop === true) return 60;
	return tmTabbarWidth.value;
});
let timeoutArr = [];
/**
 * 防抖函数
 * 防抖原理：一定时间内，只有最后一次或第一次调用,回调函数才会执行
 * @param {Function}  fn 要执行的回调函数 
 * @param {Number}    time 延时的时间
 * @param {Boolean}   isImmediate 是否立即执行 默认true
 * @param {String} timeoutName 定时器ID
 * @return null
vk.pubfn.debounce(function() {
	
}, 1000);
 */
function debounce(fn, time = 500, isImmediate = true, timeoutName = 'default') {
	// 清除定时器
	if (!timeoutArr[timeoutName]) timeoutArr[timeoutName] = null;
	if (timeoutArr[timeoutName] !== null) clearTimeout(timeoutArr[timeoutName]);
	// 立即执行一次
	if (isImmediate) {
		var callNow = !timeoutArr[timeoutName];
		timeoutArr[timeoutName] = setTimeout(function () {
			timeoutArr[timeoutName] = null;
		}, time);
		if (callNow) {
			if (typeof fn === 'function') fn();
		}
	} else {
		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时time毫秒后执行fn回调方法
		timeoutArr[timeoutName] = setTimeout(function () {
			if (typeof fn === 'function') fn();
		}, time);
	}
}

function randomString(e) {
	var e = e || 32,
		t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
		a = t.length,
		n = '';
	for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
	return n;
}
const uid = randomString(12);

let parent: any = proxy?.$parent;
while (parent) {
	if (parent?.tmTabbarId == 'tmTabbarId' || !parent) {
		break;
	} else {
		parent = parent?.$parent ?? undefined;
	}
}
if (parent) {
	parent.pushKey(uid);
}
onUnmounted(() => {
	if (parent) {
		parent.delKey(uid);
	}
});

function _onClick() {
	emits('click');
}
// function _onLongPress() { emits('longpress'); }
</script>

<style>
.ac-tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.anifun {
	animation: scale 0.2s ease;
}

@keyframes scale {
	0% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/* swiper-item {
    display: flex;
    flex: 1;
    flex-direction: column;
} */
</style>
